<template>
  <i-col :span="24">
    <div style="margin-bottom:14px;">
      <Input v-model="keyword" style="width:200px;"></Input>
      <Button style="margin-left:20px;">查询</Button>
    </div>
    <Table :data="tableData" :columns="columns" border :loading="loading">
    </Table>
    <Modal v-model="visible" :title="selectRow.paramDes">
      <Form ref="formCustom" :model="selectRow" :rules="ruleCustom" :label-width="100">
        <FormItem :label="selectRow.paramDes+'：'" prop="value">
          <Input v-model="selectRow.value" style="width:80%;"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="visible=false">取消</Button>
        <Button @click="confirm" type="primary">确认</Button>
      </div>
    </Modal>
  </i-col>
</template>

<script>
import { getIotDeviceParmList, updateIotDevicePram } from '@/api'
const validateValue = (rule, value, callback) => {
  if (!value && value !== 0) {
    callback(new Error('请输入阈值!'))
  } else {
    if (!Number.isInteger(value)) {
      callback(new Error('阈值只能输入数字!'))
    } else {
      callback()
    }
  }
}
export default {
  props: {
    id: {
      type: String,
      default: ''
    }
  },

  mounted() {
    this.init()
  },

  watch: {
    id() {
      this.init()
    }
  },

  data() {
    const vm = this
    return {
      keyword: '',
      visible: false,
      tableData: [],
      loading: false,
      selectRow: {
        value: 0
      },
      columns: [
        {
          title: '参数名称',
          align: 'center',
          key: 'paramDes'
        },
        {
          title: '阈值',
          align: 'center',
          key: 'value'
        },
        {
          title: '更新时间',
          align: 'center',
          key: 'updatedAt',
          render(h, params) {
            const {
              row: { updatedAt }
            } = params
            return h(
              'span',
              updatedAt
                ? vm.moment(updatedAt).format('YYYY-MM-DD HH:mm:ss')
                : '-'
            )
          }
        },
        {
          title: '操作',
          align: 'center',
          render(h, params) {
            const { row } = params
            return h(
              'Button',
              {
                props:{
                  size:"small"
                },
                on: {
                  click: () => {
                    vm.handleUpdate({ ...row })
                  }
                }
              },
              '更新'
            )
          }
        }
      ],
      ruleCustom: {
        value: [{ validator: validateValue, trigger: 'blur' }]
      }
    }
  },

  methods: {
    async init() {
      const vm = this
      vm.loading = true
      if (this.id) {
        const params = { id: this.id }
        const { code, data } = await getIotDeviceParmList(params)
        if (code === 200) {
          vm.tableData = data.list
        } else {
          vm.tableData = []
        }
      }
      vm.loading = false
    },

    async handleUpdate(row) {
      this.visible = true
      if (this.$refs.formCustom) {
        this.$refs.formCustom.resetFields()
      }
      this.selectRow = { ...row }
    },

    async confirm() {
      const vm = this
      vm.$refs.formCustom.validate(async valid => {
        if (valid) {
          const params = {
            id: vm.id,
            type: vm.selectRow.paramType,
            value: vm.selectRow.value
          }
          const { code, data } = await updateIotDevicePram(params)
          if (code == 200) {
            this.$Message.success('操作成功！')
            await this.init()
            this.visible = false
          } else {
            this.$Message.error('操作失败，请刷新后重试！')
          }
        }
      })
    }
  }
}
</script>
